<template>
  <el-dialog
    @open='dialog'

    title="题目预览"
    :visible="showDialog"
    class="dialog"
    width="60%"
    :close-on-click-modal="false"
    @close="closeDialogFn"
  >
  <!-- 现在提交成了吗!!!!!!!!!!!!!!!!!!! -->
    <!-- -->
    <!--  :before-close="handleClose" -->

    <el-row :gutter="20">
      <el-col :span="6">【题型】：{{question}}</el-col>
      <el-col :span="6">【编号】：{{user.id}}</el-col>
      <el-col :span="6">【难度】：{{difficu}}</el-col>
      <el-col :span="6">【标签】：{{user.tags}}</el-col>
      <el-col :span="6">【学科】：{{user.subjectName}}</el-col>
      <el-col :span="6">【目录】：{{user.directoryName}}</el-col>
      <el-col :span="6">【方向】：{{user.direction}}</el-col>
    </el-row>

    <hr />
    <div>

        <div class="one">
          【题干】：
        <p v-html="user.question" class="sub"></p>
        </div>

        <div
          v-if="this.questionname=== '单选题' || this.questionname=== '多选题'"
        >
          <div>

          {{questionname}} 选项:（以下选中的选项为正确答案）
          </div>
  <!-- //1111 -->
 <el-checkbox-group :value="number" >
    <el-checkbox v-for="item in selecename" :label='item.code'  :key="item.id">{{item.title}}
       <img :src="item.img" class="img" alt="">

    </el-checkbox>

  </el-checkbox-group>

      </div>
    </div>
    <hr />
    <div>
      <div>
        【参考答案】：
        <el-button type="danger" @click.native="video">视频答案预览</el-button>
        
        <video :src="user.videoURL"  v-if="vvvv" type='video/mp4' controls></video>
        
      </div>
    </div>

    <hr />
    <div>
      <div>
        【答案解析】:
        <p v-html="user.answer" class="p"></p>
      </div>
    </div>
    <hr />
    <div>
      <div>【题目备注】：{{ user.remarks }}</div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogFn">关闭</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'PaGe',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    UserID: {
      type: Object,
      // 复杂类型设置默认值 需要使用函数的方式
      default: () => {}
    }
  },
  data () {
    return {

      questionType: questionType,
      difficulty: difficulty,
      difficu: '',
      user: {},
      // 选项
      select: '',
      // userinfo:[],
      question: '',
      // radio: '',
      // 选择选中的值
      number: [],
      questionname: '',
      img: [],

      selecename: [],
      vvvv:false,
      is: []
    }
  },

  methods: {
    // vii(){
    //   this.$refs.video.parentNode.style.display='none'

    // },
    video () {
        this.vvvv=true
        console.log(this.vvvv);
        
    },

    closeDialogFn () {
     
      this.vvvv=false
      this.$emit('update:showDialog', false)
    },
    async dialog () {
      this.selecename = []
      // 选中状态

      const res = await detail(this.UserID)
      this.select = res.data.options
      //console.log(res)

      // 基本的数据
      this.user = res.data
      console.log(res);

      this.select.forEach(item => {
        this.selecename.push(item)
        item.isRight = !!item.isRight

        if (item.isRight) {
          const a = item.code
          this.number.push(a)
        }

        // this.img.push(item.img)

        // this.is.push(item.isRight)
      })

      const one = this.questionType.filter(item => item.value === this.user.questionType)
      this.question = one[0].label

      const two = this.difficulty.filter(item => item.value === this.user.difficulty)

      this.difficu = two[0].label

      // console.log(this.user.questionType);

      if (this.user.questionType === '3') {
        this.questionname = '简答题'
      } else if (this.user.questionType === '1') {
        this.questionname = '单选题'
      } else {
        this.questionname = '多选题'
      }

      // if (this.user.difficulty === "1") {
      //   this.user.difficulty = "简单";
      // } else if (this.user.difficulty === "2") {
      //   this.user.difficulty = "一般";
      // }
      // if (this.user.difficulty === "3") {
      //   this.user.difficulty = "困难";
      // }
    }
  }
}
</script>

<style  scoped lang='scss'>
.one{
  margin: 10px;
}
.p{
  display: inline-block;
}
.sub{
  color: blue;
}
.img{
  display: inline-block;
  width: 230px;

}
video{
  width: 230px;
  display: block;
  margin: 10px;
}
//wwwww
::v-deep{
    .el-checkbox{
      display: block;
      margin: 20px;
    }
  
		
}
</style>
